<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script setup>
import { currentGET } from '@/api/modules'

const pageflag = ref(true)
const timer = ref(null)
const charts = ref(null)
const options = ref({})

onMounted(()=>{
  getData()
})

//获取报表数据
const getData = () => {
  pageflag.value = true
  currentGET('big1').then(res => {
    if (res.success) {
      init(res.data[0])
      switper()
    }else {
      pageflag.value = false
    }
  })
}

// 初始化
const init = (data) => {
  let total = data.totalPowerConsume + data.totalOfficePowerConsume + data.totalWaterConsume + data.totalOfficeWaterConsume;
  let colors = ["#ECA444", "#33A1DB", "#56B557", "#c66863"];
  let piedata = {
    name: "能耗占比",
    type: "pie",
    radius: ["42%", "65%"],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 4,
      borderColor: "rgba(0,0,0,0)",
      borderWidth: 2,
    },
    color: colors,
    data: [
      {
        value: data.totalWaterConsume,
        name: "生产用水量",
        label: {
          shadowColor: colors[3],
        },
      },
      {
        value: data.totalPowerConsume,
        name: "生产耗电量",
        label: {
          shadowColor: colors[0],
        },
      },
      {
        value: data.totalOfficePowerConsume,
        name: "办公耗电量",
        label: {
          shadowColor: colors[2],
        },
      },
      {
        value: data.totalOfficeWaterConsume,
        name: "办公用水量",
        label: {
          shadowColor: colors[1],
        },
      },
    ],
  };
  options.value = {
    title: {
      text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
      top: "center",
      left: "center",
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,
          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    legend: {
      show: false,
      top: "5%",
      left: "center",
    },
    series: [
      //展示圆点
      {
        ...piedata,
        tooltip: { show: true },
        label: {
          formatter: "   {b|{b}}   \n   {c|{c}}   {per|{d}%}  ",
          //   position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: true,
          emphasis: {
            show: true,
          },
        },
      },
      {
        ...piedata,
        tooltip: { show: true },
        itemStyle: {},
        label: {
          backgroundColor: "auto", //圆点颜色，auto：映射的系列色
          height: 0,
          width: 0,
          lineHeight: 0,
          borderRadius: 2.5,
          shadowBlur: 8,
          shadowColor: "auto",
          padding: [2.5, -2.5, 2.5, -2.5],
        },
        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: false,
        },
      },
    ],
  };
}

// 轮询
const switper = () => {
  if (timer.value) {
    return
  }
  let looper = (a) => {
    getData()
  }
  timer.value = setInterval(looper, 10000);
  let myChart = charts.value.chart
  myChart.on('mouseover', params => {
    clearData()
  });
  myChart.on('mouseout', params => {
    timer.value = setInterval(looper, 10000);
  });
}

onBeforeUnmount(()=>{
  clearData()
})

// 清除数据
const clearData = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}
</script>

<style lang='scss' scoped>
</style>
